<template>
    <div :id="id" class="mychart"></div>
</template>

<script>
import * as echarts from "echarts";
// import "echarts-liquidfill/src/liquidFill.js";
export default {
    name: "Chart",
    components: {},
    props: ["id", "option", "clicks"],
    data() {
        return {
            myChart: null,
        };
    },
    computed: {},
    watch: {
        option: {
            handler(newval, oldval) {
                this.myChart && newval && this.myChart.setOption(newval);
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {
        // setTimeout(() => {
        this.initChart();
        // }, 800);
    },
    methods: {
        initChart() {
            this.myChart = echarts.init(document.getElementById(this.id));
            this.myChart.setOption(this.option);
            let _this = this;
            if (this.clicks) {
                this.myChart.on("click", function (params) {
                    // 当鼠标点击事件触发时，在控制台输出params
                    console.log(params);
                    _this.$emit("clickHandler", params);
                });
            }
            window.addEventListener("resize", function () {
                console.log("变化了");
                _this.myChart.resize();
            });
        },
        resizes() {
            // setTimeout(() => {
            console.log("变化了");
            // let height = document.querySelector(`#${this.id}`).offsetHeight;
            // console.log("height", height, document.querySelector(`#${this.id}`));
            // this.myChart.getDom().style.height = height + "px";
            this.myChart.resize();
            // }, 100);
        },
        resetChart() {
            this.myChart && this.myChart.setOption(this.option);
        },
    },
    beforeDestroy() {
        // 清理工作 避免内存泄漏
        // 销毁监听事件
        window.removeEventListener("resize", this.resizes());
        // 销毁 Echarts 实例
        this.myChart.dispose();
    },
};
</script>

<style lang="scss" scoped>
.mychart {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>